<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>今日统计</title>
		<meta http-equiv="pragma" c ontent="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
		<%@ include file="/WEB-INF/jspf/statics.jspf"%>
	</head>
	<body>
		<%@include file="/WEB-INF/pages/common/header.jsp" %>
		<%@include file="/WEB-INF/pages/common/menu.jsp" %>
		<div id="rightqqqq" style="border-left-style:groove ;float:left;width:88%;height:10px;margin-left:4px;min-height:80%;overflow-y:auto; overflow-x:hidden; ">
			<div style="margin:10px 0px;height:auto;">
				<div id="navContainer" class="navC mb10">  
			        <ul>  
			            <li class="current"><a name="now" id="now" onclick="searchThirtyMin();" hidefocus="true">实时访客</a></li>  
			            <li><a name="today" id="today" onclick="searchInDay('today');" hidefocus="true">今日统计</a></li> 
			            <li><a name="yestoday" id="yestoday" onclick="searchInDay('yestoday');" hidefocus="true">昨日统计</a></li>
			            <li><a name="seven" id="seven" onclick="searchInDay('seven');" hidefocus="true">近期统计</a></li>    
			        </ul>  
  				</div> 
			</div>
			<!-- 查询条件区 -->
			<div id="recendSearchCondition" style="height: 40px;margin-left:1px; line-height:40px; background-color:#ddeee5; margin-bottom:5px;width:99%;">
				<div style="float:left;">
					<input type="button" value="最近7天" id="nearSeven" onclick="searchInDay('seven');" class="btn5" style="width:120px;" />
					<input type="button" value="最近30天" id="nearThiry" onclick="searchInDay('thirty');" class="btn5" style="width:120px;"/>
				</div>
				<form id="searchForm" onsubmit="fnValidate('#startTime','#endTime');$('#dataTable').refreshData();return false;">
					起始时间：<input type="text" name="startTime" id="startTime" />
					结束时间：<input type="text" name="endTime" id="endTime" />
					<input type="button" value="统计" onclick="searchInDay('custom');" class="btn5" style="width:80px;"/>
				</form>
			</div>
			<!-- 查询条件区 -->
			<!-- 百分比统计区 -->
			<div id="percentStatics">
				<div style="width: 99%; height: 80px;background-color:#ddeee5;margin-left:1px;margin-bottom:5px;">
					<ul style="list-style: none;">
						<div style="float: left; padding-right: 20px;" >
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">游客总数</li>
							<li id="totalCount" style="text-align:center;font-weight:bold;"></li>
						</div>
						<div style="float: left; padding-right: 20px;">
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">团队游客总数</li>
							<li id="groupCount" style="text-align:center;font-weight:bold;"></li>
						</div>
						<div style="float: left; padding-right: 20px;">
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">团队游客比重</li>
							<li id="groupPrecent" style="text-align:center;font-weight:bold"></li>
						</div>
						<div style="float: left; padding-right: 20px;">
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">散客总数</li>
							<li id="scatteredCount" style="text-align:center;font-weight:bold"></li>
						</div>
						<div style="float: left; padding-right: 20px;">
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">散客比重</li>
							<li id="scatteredPrecent" style="text-align:center;font-weight:bold"></li>
						</div>
						<div style="float: left; padding-right: 20px;">
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">网络游客总数</li>
							<li id="meshCount" style="text-align:center;font-weight:bold"></li>
						</div>
						<div style="float: left;">
							<li style="font-size:20px;font-family: Tahoma, Geneva, sans-serif;padding:10px; 0px;">网络游客比重</li>
							<li id="meshPrecent" style="text-align:center;font-weight:bold"></li>
						</div>
					</ul>
				</div>
			</div>
			<!-- 百分比统计区 -->
			<div style="height: 330px;" class="containerStyle">
				<div id="container1" style="min-width: 250px; height: 300px; margin: 0 auto"></div>
			</div>
			<div class="testaa" style="width:99%;height:10px;"></div>
			<div style="float: left;  height: auto;margin-bottom:100px;" class="containerStyle">
				<!--datatable start-->
				<div class="div-958" style="margin-top: 0px; width: 100%">
					<div style="width: 100%;" class="container clearfix w942">
						<div style="width:100%;" class="cont bl0">
							<!-- content start -->
							<div class="content">
								<!-- orderResults start -->
								<div class="orderResults" ng-show="orderForm.searchFlag">
									<!-- dataTable_wrapper start -->
									<div id="dataTable_wrapper" class="dataTables_wrapper" role="grid">
										<div class="top">
											<div class="dataTables_info" id="dataTable_info">
												游客明细
											</div>
										</div>
										<table id="" class="dataTable" name="datatable1"
											aria-describedby="dataTable_info">
											<thead>
												<tr role="row">
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														来源
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														姓名
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														证件号码
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														性别
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														省份
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														城市
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														进入时间
													</th>
												</tr>
											</thead>
											<tbody role="alert" aria-live="polite" aria-relevant="all">
											</tbody>
										</table>
										
										<table id="" class="dataTable" name="datatable2"
											aria-describedby="dataTable_info">
											<thead>
												<tr role="row">
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														时段
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														游客人数
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														团队
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														比重
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														散客
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														比重
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														网络预约
													</th>
													<th class="sorting_disabled" role="columnheader"
														rowspan="1" colspan="1">
														比重
													</th>
												</tr>
											</thead>
											<tbody role="alert" aria-live="polite" aria-relevant="all">
											</tbody>
										</table>
									</div>
									<!-- dataTable_wrapper end -->
								</div>
								<!-- orderResults end -->
							</div>
							<!-- content end -->
						</div>
					</div>
				</div>
				
				<!-- div-958 end -->
				</div>
				<div class="testaa" style="width:99%;height:10px;"></div>
			</div>
	</body>
</html>
<script type="text/javascript" src="<%=basePath%>js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-1.10.3.datepicker_zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$().ready(function(){
	$('#navigation').accordion({
		header: '.head',
		navigation1: true, 
		event: 'click',
		fillSpace: true,
		active:1,
		animated: 'bounceslide'
	});
	$("a[class='actived']").removeAttr("class");
	$("#trend").attr("class", "actived");
	$("input[name='startTime']").datepicker().val();
	$("input[name='endTime']").datepicker().val();
	$("#recendSearchCondition").css("display","none");
	$("#percentStatics").css("display","none");
	$("table[name='datatable1']").attr("id","dataTable").css("display","block");
	$("table[name='datatable2']").removeAttr("id").css("display","none");
	
	$("#navContainer li").click(function(){
		$("#navContainer li").each(function(){
			$(this).attr("class","");
		})
		$(this).attr("class","current");
	});
	searchThirtyMin();
});


function statisticPresent(){
	$.post("${ctx }/visitor/statistics/sta/eve_day_visitor",$("#searchForm").serializeArray(),function(data){
		var data = eval('(' + data + ')')
		$("#totalCount").text(data.totalCount);
		$("#groupCount").text(data.groupCount);
		$("#groupPrecent").text(data.groupPrecent);
		$("#scatteredCount").text(data.scatteredCount);
		$("#scatteredPrecent").text(data.scatteredPrecent);
		$("#meshCount").text(data.meshCount);
		$("#meshPrecent").text(data.meshPrecent);
	})
}

function searchInDay(value){
	handleTime(value);
	$("#recendSearchCondition").css("display","none");
    $("#percentStatics").css("display","block");
    $("table[name='datatable1']").removeAttr("id").css("display","none");
    $("table[name='datatable1']").next().remove();
    $("table[name='datatable2']").attr("id","dataTable").css("display","block");
	var xtext1 = []; 
	var text="";
	var url="";
    var color1 = ["gray","pink","red","blue","yellow","green","#fff"];
    url="${ctx }/visitor/statistics/chart/single/day_visitor";
	
	if(value=="today"){
    	text = '今日统计';
    	$("#currentPosition").text("当前位置：统计报表 > 趋势分析  > 今日统计");
    	searchVisitorInfo("inday");
    }else if(value=="yestoday"){
    	text = '昨日统计';
    	$("#currentPosition").text("当前位置：统计报表 > 趋势分析  > 昨日统计");
    	searchVisitorInfo("inday")
    }else{
    	$("#currentPosition").text("当前位置：统计报表 > 趋势分析  > 近期统计");
    	$("#recendSearchCondition").css("display","block");	
    	if(value=="seven"){
    		text="最近7天统计";
    	}else if(value=="thirty"){
    		text="最近30天统计";
    	}else{
    		text="近期统计";
    		if($("#startTime").val()==null || $("#startTime").val()=="" || $("#endTime").val()==null || $("#endTime").val()==""){
       			Showbo.Msg.alert('请输入开始时间和结束时间');
       			return;
       		}
    	}
    	url="${ctx }/visitor/statistics/chart/multiple/day_visitor";
	   	searchVisitorInfo("multipart");
    }
	statisticPresent();
	$.post(url,$("#searchForm").serializeArray(),function(data){
		var json1 = eval("("+data+")");
        for(var i=0;i<json1.length;i++){
       		json1[i].y=json1[i].staCount;
            xtext1[i] = json1[i].staName;
			 }
        chart1.series[0].setData(json1);
	});	
    
    var chart1 = new Highcharts.Chart({
        chart:{
            renderTo:'container1', 
             type: 'area'
        },
        title:{
            text: text
        },
        tooltip:{
        	pointFormat: '人数:' +'{point.y}人',
        	crosshairs: [{            // 设置准星线样式
		    width: 3,
		    color: 'green'
			}, {
		    width: 1,
		    color: "#006cee",
		    dashStyle: 'longdashdot',
		    zIndex: 100 
			}]
        },
        exporting:{enabled:false},
        xAxis:{
            categories:xtext1
        },
        yAxis:{
            title:{
                text:'人数' //Y轴的名称
            },
        }, 
        
        plotOptions: {
            area: {
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series:[{
        	colorByPoint: false,	
            name:"时间"
        }]
    });
}

function searchThirtyMin(){
	$("#currentPosition").text("当前位置：统计报表 > 趋势分析  > 实时访客");
	$("#recendSearchCondition").css("display","none");
	$("#percentStatics").css("display","none");
	$("table[name='datatable2']").removeAttr("id").css("display","none");
	$("table[name='datatable2']").next().remove();
    $("table[name='datatable1']").attr("id","dataTable").css("display","block");
    search();
	var xtext1 = [];
    var color1 = ["gray","pink","red","blue","yellow","green","#fff"];
    $.ajax({
        type:'post',
        url:'${ctx }/visitor/statistics/chart/thirty_min_visitor',
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success:function(data){
           var json1 = eval("("+data+")");
           for(var i=0;i<json1.length;i++){
           		json1[i].y=json1[i].staCount;
                xtext1[i] = json1[i].staName;
 			}
            chart1.series[0].setData(json1);
        },
        error:function(e){
        } 
    });
    
    var chart1 = new Highcharts.Chart({
        chart:{
            renderTo:'container1',
             type: 'area'
        },
        title:{
            text:'近三十分钟游客情况' 
        },
        xAxis:{
            categories:xtext1
        },
        yAxis:{
            title:{
                text:'人数' //Y轴的名称
            },
        }, 
        tooltip:{
        	pointFormat: '人数:' +'{point.y}人',
        	crosshairs: [{            // 设置准星线样式
		    width: 3,
		    color: 'green'
			}, {
		    width: 1,
		    color: "#006cee",
		    dashStyle: 'longdashdot',
		    zIndex: 100 
			}]
        },
        plotOptions: {
            area: {
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        }, exporting:{enabled:false},
        series:[{
        	colorByPoint: false,	
            name:"时间"
        }]
    });
}

function search() {
    $("#dataTable").dataTables({
        "sAjaxSource": "${ctx }/visitor/statistics/search/thirty_min_visitor",
        "fnServerData": function (sSource, aoData, fnCallback) {
         	var postData = aoData.concat($("#searchForm").serializeArray());
            $.post(sSource, postData,function (json) {
                fnCallback(json.data);
            }, "json");
        },
        "aoColumns": [
        	{
                "sName": "order_no", "mDataProp": "orderNo", "bSortable": false
            },
        	{
                "sName": "name", "mDataProp": "name", "bSortable": false
            },
            {
                "sName": "identity_card", "mDataProp": "identityCard", "bSortable": false
            },
            {"mDataProp": function (aData, type, val) {
                   switch (aData.type) {
                       case 1:
                           val = "<span style='color: balck'>男</span>";
                           break;
                       case 0:
                           val = "<span style='color: balck'>女</span>";
                           break;
                       default:
                       	val="<span style='color: balck'>男</span>";
                   }
                   return val;
                }, "sName": "gender", "bSortable": false
            },
            {
                "sName": "provice_display", "mDataProp": "proviceDisplay", "bSortable": false
            },
            {
                "sName": "city_display", "mDataProp": "cityDisplay", "bSortable": false
            },
            {
                "sName": "invote_time", "mDataProp": "invoteTimeStr", "bSortable": false
            }
        ]
    });
     $("#dataTable").columnManager({"listTargetID": "column-edit-01"});
     $(".bottom").remove();
}
function searchVisitorInfo(type) {
    $("#dataTable").dataTables({
        "sAjaxSource": "${ctx }/visitor/statistics/search/visitor_info/"+type,
        "fnServerData": function (sSource, aoData, fnCallback) {
         	var postData = aoData.concat($("#searchForm").serializeArray());
            $.post(sSource, postData,function (json) {
                fnCallback(json.data);
            }, "json");
        },
        "aoColumns": [
        	{
                "sName": "sta_name", "mDataProp": "staName", "bSortable": false
            },
        	{
                "sName": "sta_count", "mDataProp": "staCount", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "staGroupCount", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "groupPrecent", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "scatteredCount", "bSortable": false
            },
            {
                "sName": "sta_group_count", "mDataProp": "scatteredPrecent", "bSortable": false
            },
            {
                "sName": "sta_internet_trading_count", "mDataProp": "staInternetTradingCount", "bSortable": false
            },
            {
                "sName": "sta_internet_trading_count", "mDataProp": "meshPrecent", "bSortable": false
            }
        ]
    });
     $("#dataTable").columnManager({"listTargetID": "column-edit-01"});
     $(".bottom").remove();
}

</script>